<template>
	<view class="page_bg">
		<z-paging ref="paging" class="z-paging" v-model="chapters" @query="getListByChapter" :empty-view-fixed="false"
			:hide-loading-more-when-no-more-by-limit="5">
			<u-collapse :head-style="collHeadStyle" :item-style="itemStyle" :accordion="false" ref="colla">
				<u-collapse-item :title="item.title" v-for="item in chapters" :key="item._id">
					<block v-if="item.videos.length > 0">
						<view class="section" v-for="(sec,index) in item.videos" :key="sec._id">
							<view class="left_circle">
								<view class="direct" v-if="index != 0"></view>
							</view>
							<view class="middle_text">
								<view class="title">{{sec.title}}</view>
								<view class="line_bg">
									<u-line-progress height="12" :show-percent="false" active-color="#FF960C"
										inactive-color="rgba(253, 211, 3, 0.2)" :striped="true"
										:percent="showNumber(sec)" :striped-active="true">
									</u-line-progress>
									<view class="info">{{sec.history.length}}/{{sec.questions.length}}</view>
								</view>
							</view>
							<view class="btns">
								<block v-if="sec.questions.length > 0">
									<view class="btn" v-if="checkShow(sec)" @tap="practiceWithCheck(sec)">查看解析</view>
									<view class="btn r_btn" @tap="starPractice(sec)">{{doExamShow(sec)}}</view>
								</block>
								<block v-else>
									<view class="btn n_btn">暂无题目</view>
								</block>
							</view>
						</view>
					</block>
					<view class="section" style="color:#999" v-else> 暂无小节 </view>
				</u-collapse-item>
			</u-collapse>
		</z-paging>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				courseId: '',
				chapters: [],

				collHeadStyle: { padding: '28rpx 20rpx' },
				itemStyle: { borderBottom: '2rpx solid #f9f9f9' },
				leftSelect: 0, // 左侧分类选中项
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			// 进度条显隐
			showNumber() {
				return (sec) => {
					if (sec.history.length == 0 || sec.questions.length == 0) return 0
					return (sec.history.length / sec.questions.length) * 100
				}
			},
			// 查看解析按钮显隐
			checkShow() {
				return (sec) => {
					return sec.history.length == sec.questions.length
				}
			},
			// 做题按钮状态
			doExamShow() {
				return (sec) => {
					if (sec.history.length == 0) return '开始做题'
					if (sec.history.length < sec.questions.length) return '继续做题'
					return '重新做题'
				}
			}
		},
		methods: {
			init(options) {
				that.courseId = options.cid

				uni.$on('chapterUpdate', function(data) {
					that.getListByChapter(1, 10)
				})
			},
			// 请求章节数据
			getListByChapter(pageIndex, pageSize) {
				vk.callFunction({
					url: 'client/quest-bank/kh/vip/getChapter',
					title: "加载中...",
					data: { pageIndex, pageSize, courseId: that.courseId, need_user_info: true },
					success(data) {
						that.$refs.paging.complete(data.rows)
					}
				})
			},
			// 开始做题
			starPractice(sec) {
				uni.navigateTo({
					url: `/pages/question-bank/practice-page?pageTitle=会员练习&id=${sec._id}`
				})
			},
			// 做题并查看解析
			practiceWithCheck(sec) {
				uni.navigateTo({
					url: `/pages/question-bank/practice-page?pageTitle=会员练习&id=${sec._id}&check=true`
				})
			}
		},
		onUnload() {
			uni.$off('chapterUpdate')
		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background-color: #F5F5F5;
		position: relative;
	}

	.z-paging {
		// margin-top: 90rpx;
		background-color: #FFFFFF;

		.section {
			display: flex;
			align-items: center;
			padding: 16rpx 20rpx 24rpx 42rpx;
			font-size: 24rpx;
			color: #333333;
			position: relative;

			.left_circle {
				width: 20rpx;
				height: 20rpx;
				background: rgba(255, 255, 255, 0.39);
				border: 2rpx solid #FDD303;
				border-radius: 50%;
				margin-right: 28rpx;
			}

			.middle_text {
				flex: 1;
				margin-right: 14rpx;

				.title {
					margin-bottom: 8rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.line_bg {
					width: 172rpx;
					display: flex;
					align-items: center;

					.info {
						margin-left: 20rpx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;

				.btn {
					padding: 9rpx 27rpx;
					border-radius: 30rpx;
					border: 1rpx solid #333333;
					background: #FFFFFF;
					margin-left: 12rpx;
					font-size: 20rpx;
				}

				.r_btn {
					background: #333333;
					color: #FFFFFF;
				}

				.n_btn {
					background: #999;
					border: 1rpx solid #999;
					color: #FFFFFF;
				}
			}

			.direct {
				width: 0;
				height: 60%;
				border-left: 2rpx solid #AEAEAE;
				position: absolute;
				bottom: 75%;
				left: 51rpx;
				opacity: 0.8;
			}
		}
	}

	.pop_bg {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.main {
			height: calc(100% - 50rpx);
			margin-top: 10rpx;
			overflow: hidden;
			display: flex;

			.left_scroll {
				height: 100%;
				width: 30%;

				.u-tab-item {
					height: 110rpx;
					background: #f6f6f6;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #444;
					font-weight: 400;
					line-height: 1;
				}

				.u-tab-item-active {
					position: relative;
					color: #000;
					font-size: 26rpx;
					font-weight: 600;
					background-color: #FFFFFF;
				}

				.u-tab-item-active::before {
					content: "";
					position: absolute;
					border-left: 4px solid #FF960C;
					height: 32rpx;
					left: 0;
					top: 39rpx;
				}
			}

			.right_scroll {
				width: 70%;
				padding: 30rpx 0 0 20rpx;

				.page-view {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.thumb-box {
						background: #F5F5F5;
						border-radius: 6px;
						width: 47%;
						padding: 21rpx 0;
						text-align: center;
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}
</style>
